﻿declare var timeago: () => any;
$(function () {
    var files = [
        { ID: 0, FILENAME: '文件名1', SCSJ: '2016-01-10 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "txt" },
        { ID: 2, FILENAME: '文件名3', SCSJ: '2016-08-12 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "doc" },
        { ID: 3, FILENAME: '文件名4', SCSJ: '2016-10-13 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "txt" },
        { ID: 4, FILENAME: '文件名5', SCSJ: '2016-09-14 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "zip" },
        { ID: 0, FILENAME: '文件名1', SCSJ: '2016-01-10 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "rar" },
        { ID: 1, FILENAME: '文件名2', SCSJ: '2016-10-11 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "zip" },
        { ID: 2, FILENAME: '文件名3', SCSJ: '2016-08-12 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "ppt" },
        { ID: 3, FILENAME: '文件名4', SCSJ: '2016-10-13 00:00:00', FILESIZE: '100mB', XZCS: '10', SCR: '申君健', EXT: "txt" }
    ];

    $("#btnQuery").click(function () {
        //$.ajax("getCXFiles", { type: "POST", dataType: 'json',
        //    data: {
        //        sslb: $("#ulSSLB").val(),
        //        sszy: $("#ulSSZY").val(),
        //        ssyt: $("#ulSSYT").val(),
        //        key: $("#txtKEY").val(),
        //        ext: $("#ulExt").val()
        //    }
        //}).done(function (files) {
        //返回的files包含以下列：
        //FILENAME,SCSJ,SLLB,SLZY,SSYT,SCR
        renderTableview(files);

        renderIconListview(files);
        //});
    });
    //输出为表格形式
    var timeAgo = timeago();
    function renderTableview(files: any[]) {
        $("#tblFile").autoTable({
            data: files,
            header: [[{ title: '#', span: [1, 1] }, { title: '文件名|FILENAME', span: [1, 1] },
                { title: '文件大小|FILESIZE', span: [1, 1] },
                { title: '下载次数|XZCS', span: [1, 1] },
                { title: '上传时间|SCSJ', span: [1, 1] },
                { title: '上传人|SCR', span: [1, 1] }
            ]],
            headerFields: ["FILENAME", "FILESIZE", "XZCS", "SCSJ", "SCR"],
            sortFields: ["FILENAME", "FILESIZE", "XZCS", "SCSJ", "SCR"],
            keydataOnRow: ["ID"],
            columns: {
                SCSJ: {
                    formator: function (v: string, r) {
                        return timeAgo.format(v, 'zh_CN');// v.substr(0, 16);
                    }
                },
                FILENAME: {
                    formator: function (v, row: any) {
                        return `<div class='filenamefmt'>
                    <div class="file-icon file-icon-sm " data-type="${row.EXT}" ></div>
                    <a href='#' id='${row.ID}' >${v}</a>
                </div>`;
                    }
                }
            },
            isScrollable: true,
            freezeContainer: '#tableview',
            // freezeFields:['FILENAME'],
            isRownumber: true,
            isPageable: files.length > 50,
            isFooter: files.length > 50,
            selectMode: AUTO.SelectMode.SINGLE
        });
    };

    //点击选中标签
    $("#divCXTJ").on("click", 'li', function () {
        $(this).addClass("actived").siblings().removeClass("actived")
    });


    //锁定表头
    $(window).resize(function () {
        $("#tableview").css({
            height: ($(window).innerHeight() - $("#tableview").offset().top - 10) + 'px'
        });
    }).resize();

    //如果用表格形式，则用上面代码就行
    //如果用iconview和listview的切换形式，则用下面代码
    $(".switchmode").on("click", 'span', function () {
        var $span = $(this);
        $span.addClass('actived').siblings().removeClass('actived');
        var cls = $span.data('cls');
        $("#toggleview").removeClass().addClass(cls);
    });
    //列表视图和图标视图共享一样的DOM结构
    function renderIconListview(files: any[]) {
        var content = _.reduce(files, function (c, file) {
            return c += `<li id='${file.ID}' title='${file.FILENAME}'>
            <div class="l-icon"><div class="file-icon file-icon-lg" data-type="ppt"></div></div>
            <span class="l-title">${file.FILENAME}</span>
            <span class="l-filesize">${file.FILESIZE}</span>
            <span class="l-scsj">${file.SCSJ}</span>
        </li>`;
        }, '');
        //在listviewhead后面，移除原先结构，插入新结构。
        $("#toggleview").find('.listviewhead').siblings().remove().end()
            .after(content);

    }

    //菜单事件
    $('#mm').menu({
        onClick: function (item) {
            console.log(item);
            console.log('当前文件id=' + $('#mm').data("fid"));
            if (item.name == 'praise') {

            } else if (item.name == 'preview') {

            } else if (item.name == 'download') {

            }
        }
    });
    //图标上弹
    $("#toggleview").on("contextmenu", "li", function (e) {
        $('#mm').data("fid", $(this).attr("id"))
            .menu('show', {
                left: e.pageX,
                top: e.pageY
            })
        return false;
    });
    //表格行上弹
    $("#tableview").on("contextmenu", "tr", function (e) {
        $('#mm').data("fid", $(this).data("id"))
            .menu('show', {
                left: e.pageX,
                top: e.pageY
            })
        return false;
    });

    
});